import React, { PureComponent } from 'react';

// 引入影视样式
import './scss/search.scss';
// 引入样式
import { Input, Button, message } from 'antd';
import Axios from 'axios';
import { webSite } from '../../website';
export default class Search extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 搜索框内容
      input: '',
      // 结果的列表
      searchConAll: [],
      // 内容切换
      isBody: false,
      // 热门搜索
      HotSearch: [],
      // 搜索关键词
      filmText: '',
      // 电影电视剧切换
      isBodyFilm: 0,
      // 当电影资源时显示提示
      filmTrue: false,
      // 电视剧的列表
      TvPlayList: [],
      // 当电视剧没有资源时显示提示
      TvPlayTrue: false
    }
  }
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = (state, callback) => {
      return;
    }
  }

  componentDidMount () {
    // 网页加载获取热门搜索
    this.goHotSearch()
  }

  // 获取热门搜索内容
  goHotSearch = () => {
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/goHotSearch").then(err => {
      if (err.data.code === 'G0001') {
        this.setState({
          HotSearch: err.data.All
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }

  // 点击热门搜索查找
  goHotSearchInput = (input) => {
    this.setState({
      input
    }, () => {
      // 把值赋给输入框并调用搜索事件
      this.searchCon();
    })
  }

  // 搜索事件
  searchCon = () => {
    let { input } = this.state;
    if (!input) {
      message.info({ content: '请输入搜索内容', className: 'bulletChatMessage' })
      return;
    }
    // 输入判断  当输入框输入管理员进入管理员界面
    if (input === '管理员') {
      this.props.history.replace('/king');
      return;
    }
    // 切换显示
    this.setState({
      isBody: true,
      filmText: input,
      searchConAll: [],
      filmTrue: false,
      TvPlayTrue: false
    })

    // 电影的搜索结果
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/searchCon", { input }).then(err => {
      if (err.data.code === 'G0001') {
        let all = err.data.All;
        if (all.length === 0) {
          // 没有数据就提示用户
          this.setState({
            filmTrue: true
          })
        } else {
          // 有数据就隐藏提示
          this.setState({
            searchConAll: all
          })
        }
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })

    // 电视剧的搜索结果
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/searchConTv", { input }).then(err => {
      if (err.data.code === 'G0001') {
        let all = err.data.All;
        if (all.length === 0) {
          // 没有数据就提示用户
          this.setState({
            TvPlayTrue: true
          })
        } else {
          // 电视剧的列表
          this.setState({
            TvPlayList: all
          })
        }
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 点击图标跳转到本地
  goMoviesHome = () => {
    this.props.history.replace('/Movies')
  }

  // 切换显示方式
  switchFilm = (isBodyFilm) => {
    this.setState({
      isBodyFilm
    })
  }

  // 显示
  goisBodyFilm = () => {
    let { isBodyFilm } = this.state;
    if (isBodyFilm === 0) {
      // 显示电影
      return this.SearchBodyFilm();
    } else {
      // 显示电视剧
      return this.SearchBodyTVPlay();
    }
  }

  // 跳转到电影播放页面
  GoFilmPlay = (list) => {
    this.props.history.push({ pathname: "/Movies/FilmPlay", state: { url: list.CarouselUrl, title: list.CarouselText } });
  }

  // 电影内容的展示
  SearchBodyFilm = () => {
    let { searchConAll, filmText, filmTrue } = this.state;
    return (
      <div className='SearchBodyFilm'>
        {
          searchConAll.length !== 0 ?
            <h3>搜索电影“<span style={{ color: '#ff6000' }}>{filmText}</span>”，总共找到<span style={{ color: '#ff6000', margin: '0 5px' }}>{searchConAll.length}</span>个结果</h3>
            : ''
        }
        <ul className='SearchBodyUl'>
          {
            searchConAll.length !== 0 ?
              searchConAll.map((list, index) => {
                return (
                  <li className='SearchBodyLi' key={index} onClick={() => this.GoFilmPlay({ CarouselText: list.CarouselText, CarouselUrl: 'https:' + list.CarouselUrl })}>
                    <div className='SearchBodyLiImg'>
                      <img src={list.CarouselImg} alt={list.CarouselText} />
                    </div>
                    <div className='SearchBodyLiBody'>
                      <h2>{list.CarouselText}</h2>
                      <p>{list.CarouselDirector}</p>
                      <div className='SearchBodyLiBody_content'>
                        {list.CarouselBrief}
                      </div>
                    </div>
                  </li>
                )
              })
              : ''
          }
          {/* 没有数据时的显示 */}
          {
            filmTrue ?
              <li className='SearchBodyInfo'>
                <div className='SearchBodyInfoImg'>
                  <img src={require('../image/info.png')} alt="警告" />
                </div>
                <div className='SearchBodyInfoText'>
                  抱歉没有找到关于“<span style={{ color: '#20bc22' }}>{filmText}</span>”的相关电影
                </div>
              </li>
              : ''
          }
        </ul>
      </div>
    )
  }

  // 选择集数
  GoSelectedWorks = (list) => {
    this.props.history.push({ pathname: "/Movies/TVPlay", state: { url: list.CarouselUrl, title: list.CarouselTitle, index: 0, transformation: true } });
  }

  // 电视剧内容的展示
  SearchBodyTVPlay = () => {
    let { TvPlayList, filmText, TvPlayTrue } = this.state;
    return (
      <div className='SearchBodyFilm'>
        {
          TvPlayList.length !== 0 ?
            <h3>搜索电视剧“<span style={{ color: '#ff6000' }}>{filmText}</span>”，总共找到<span style={{ color: '#ff6000', margin: '0 5px' }}>{TvPlayList.length}</span>个结果</h3>
            : ''
        }
        <ul className='SearchBodyUl'>
          {
            TvPlayList.length !== 0 ?
              TvPlayList.map((list, index) => {
                return (
                  <li className='SearchBodyLi' key={index} onClick={() => this.GoSelectedWorks(list)}>
                    <div className='SearchBodyLiImg'>
                      <img src={list.CarouselImage} alt={list.CarouselTitle} />
                    </div>
                    <div className='SearchBodyLiBody'>
                      <h2>{list.CarouselTitle}</h2>
                      <p>{list.CarouselToStar}</p>
                      <div className='SearchBodyLiBody_content'>
                        {list.CarouselBrief}
                      </div>
                    </div>
                  </li>
                )
              })
              : ''
          }
          {/* 没有数据时的显示 */}
          {
            TvPlayTrue ?
              <li className='SearchBodyInfo'>
                <div className='SearchBodyInfoImg'>
                  <img src={require('../image/info.png')} alt="警告" />
                </div>
                <div className='SearchBodyInfoText'>
                  抱歉没有找到关于“<span style={{ color: '#20bc22' }}>{filmText}</span>”的相关电视剧
                </div>
              </li>
              : ''
          }
        </ul>
      </div>
    )
  }

  render () {
    let { input, isBody, HotSearch, isBodyFilm } = this.state;
    return (
      <div className='Search'>
        <div className='MoviesHeader'>
          {/* 顶部logo */}
          <div className='MoviesHeader_logo'>
            <img src={require('../image/tv.png')} alt="logo" onClick={this.goMoviesHome} />
          </div>
          <div className='MoviesHeader_search'>
            <Input placeholder="输入你想看的" className='MoviesHeaderViesInput' value={input} name='input' onChange={this.handleInput} autoComplete="off" onPressEnter={this.searchCon} autoFocus="autofocus" />
          </div>
          <div className='MoviesHeader_bottom'>
            <Button onClick={this.searchCon} className='MoviesSearchCon' type='text'>搜一下</Button>
          </div>
        </div>
        {/* 内容展示 */}
        <div className='SearchBody'>
          {
            isBody ?
              <div style={{ width: '100%', height: '100%' }}>
                <div className='SearchBodyTop'>
                  <div className='SearchBodyTop_left' onClick={() => this.switchFilm(0)}>
                    电影
                    {isBodyFilm === 0 ? <em className='border'></em> : ''}
                  </div>
                  <div className='SearchBodyTop_left' onClick={() => this.switchFilm(1)}>
                    电视剧
                    {isBodyFilm === 1 ? <em className='border'></em> : ''}
                  </div>
                </div>
                <div className='SearchBodyCon'>
                  {
                    // 内容切换
                    this.goisBodyFilm()
                  }
                </div>
              </div>
              :
              <div className='SearchBodyNone'>
                <h3>热门搜索</h3>
                <ul className='SearchBodyNoneUl'>
                  {
                    HotSearch.length !== 0 ?
                      HotSearch.map((list, index) => {
                        return (
                          <li key={index} onClick={() => this.goHotSearchInput(list)}>{list}</li>
                        )
                      })
                      : ''
                  }
                </ul>
              </div>
          }
        </div>
      </div>
    )
  }
}